<template>
    <div class="root">
        <figure class="projectDesc-block"  @mouseover="paramsDisplay = true" @mouseout="paramsDisplay = false">
            <div class="content-block">
                <div>
                    <div>{{ item.name }}</div>
                    <div v-if="item.status === 1" class="starting-block">
                        <Icon size="18" style="color:rgba(145,205,3,1);" type="md-power" />
                        <span>{{ $t('langObj.start') }}</span>
                    </div>
                    <div v-else-if="item.status === 1" class="stop-block">
                        <span></span>
                        <span>{{ $t('langObj.creating') }}</span>
                    </div>
                    <div v-else class="stop-block">
                        <span></span>
                        <span>{{ $t('langObj.stop') }}</span>
                    </div>
                </div>
                <div>{{ item.taskDesc }}</div>
                <div>{{ item.forigenName }}</div>
            </div>
            <div class="button-group-block">
                <p>{{ createTime }}</p>
                <ButtonGroup>
                    <Button :disabled="item.chakan === 0" @click="chakan">{{ $t('langObj.chakan') }}</Button>
                    <Button :disabled="item.fenxiang === 0" @click="fenxiang">{{ $t('langObj.fenxiang') }}</Button>
                    <Button :disabled="item.qidong === 0" @click="qidong">{{ $t('langObj.xufei') }}</Button>
                    <Button :disabled="item.shifang === 0" @click="saveISO = true">{{ $t('langObj.shifang') }}</Button>
                    <Button type="warning" :disabled="item.shanchu === 0" @click="shanchu">{{ $t('langObj.shanchu') }}</Button>
                </ButtonGroup>
            </div>
        </figure>
        <div v-show="paramsDisplay" class="config-params-block">
            <p>{{ $t('langObj.cpu') }}:{{item.cpu}}Core</p>
            <p>{{ $t('langObj.memory') }}:{{item.memory}}Gi</p>
            <p>{{ $t('langObj.storage') }}:{{item.storage}}Gi</p>
        </div>
        <Modal
            v-model="saveISO"
            :mask-closable="false"
            width="360"
            title="释放机器">
            <div style="text-align:center;font-size:16px;font-weight:600;">是否保存镜像文件</div>
            <div slot="footer">
                <Button type="primary" @click="shifang(false)">不保存</Button>
                <Button type="primary" @click="shifang(true)">保存</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import { formatData } from '@/utils/format';
import { mapActions } from 'vuex';
export default {
    props:['item'],
    data(){
        return{
            saveISO:false,
            paramsDisplay:false,
        }
    },
    computed:{
        createTime(){
            return formatData(this.item.createTime,{type:'detail'})
        },
    },
    methods: {
        ...mapActions(['XprojectView']),
        chakan(){
            this.XprojectView(this.item.taskId).then(({data}) => {
                const notebookUrl = `/notebook/?url=${encodeURIComponent('http://' + data)}&task_id=${this.item.taskId}`;
                window.open(notebookUrl,"_blank")
            })
        },
        fenxiang(){
            this.$emit("projectShare",this.item.taskId)
        },
        qidong(){
            this.$router.push({path:`/order/${this.item.taskId}/${2}/${1}`})
        },
        shifang(commit){
            this.$emit("projectRelease",{commit:commit,taskId:this.item.taskId});
            this.saveISO = false
        },
        shanchu(){
            this.$emit("projectDelete",this.item.taskId)
        }
    },
}
</script>

<style lang="scss" scoped>
    .root{
        height: 200px;
    }
    .projectDesc-block{
        display: flex;
        padding: 25px 25px 5px;
        height:150px;
        &:hover{
            cursor: pointer;
            background:rgba(237,238,243,1);
        }
    }

    .content-block{
        margin-left: 22px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        & > div:first-of-type{
            font-size:16px;
            font-weight:600;
            color:rgba(51,51,51,1);
            display: flex;
            align-items: center;
        }
    }
    .starting-block{
        font-size:12px;
        color:rgba(145,205,3,1);
        margin-left:15px;
    }
    .stop-block{
        font-size:12px;
        color:rgba(104,170,253,1);
        margin-left:15px;
            & > span:first-of-type{
                display: inline-block;
                width:15px;
                height: 15px;
                line-height: 15px;
                background:rgba(104,170,253,1);
                vertical-align: middle;
            }
    }
    .button-group-block{
        width: 400px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        font-size:12px;
        font-weight:400;
        color:rgba(153,153,153,1);
    }
   .config-params-block{
        height:20px;
        background:rgba(104,170,253,1);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size:12px;
        font-weight:400;
        color:rgba(255,255,255,1);

        p + p {
            margin-left: 15px
        } 
   }
</style>
